<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script crossorigin src="../js/react.production.min.js"></script>
    <!-- 核心库  最先引用 -->
    <script crossorigin src="../js/react-dom.production.min.js"></script>
    <!-- 引用react-dom 用于支持react操作DOM -->
    <script crossorigin src="../js/babel.min.js"></script>
    <!-- 引入babel 用于将jsx转为js -->
    <title>学习react</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/babel"> // 此处一定要写babel

        /*
            1.初始阶段 由ReactDOM.render()触发  --- 初次渲染
                1.constructor()
                2.componentWillMount()
                3.render()
                4.componentDidMount()
            2.更新阶段 由组件内部this.setState()或父组件render触发
                1.shouldComponentUpdate()
                2.componentWillUpdate()
                3.render()
                4.componentDidUpdate()
            3.卸载组件 由ReactDOM.unmountComponentAtNode()触发
                1.componentWillUnmount()
        */
        class VDOM extends React.Component {
            state = { opacity: 1 }
            handleClick = () => {
                // 卸载组件
                ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
            }
            force = () => {
                // 不改变state状态，强制更新
                this.forceUpdate()
            }

            // 组件将要挂载
            componentWillMount() {
                console.log('组件将要挂载componentWillMount');
            }

            //组件挂载在页面之后 只进行一次 发送ajax请求
            componentDidMount() {
                setTimeout(() => {
                    let { opacity } = this.state
                    opacity -= 0.1
                    if (opacity <= 0) opacity = 1
                    this.setState({ opacity })
                    // setState 更改状态之后
                }, 200)
                console.log('组件挂载在页面之后componentDidMount');
            }

            // 组件将要接收参数props 第一次传的不算 以后传的才算
            componentWillReceiveProps(props) {
                // 可以接收参数
                console.log(props);
                console.log('组件接收参数componentWillReceiveProps');
            }

            // 组件是否更新 控制组件更新的阀门 返回布尔值 默认是true
            shouldComponentUpdate() {
                console.log('组件是否更新shouldComponentUpdate');
                return true
            }

            // 组件将要更新的钩子
            componentWillUpdate() {
                console.log('组件将要更新的钩子componentWillUpdate');
            }

            // 组件更新完毕
            componentDidUpdate() {
                console.log('组件更新完毕componentDidUpdate');
            }

            // 组件将要卸载  收尾工作 清除定时器等
            componentWillUnmount() {
                console.log('组件将要卸载componentWillUnmount');
                // 清除定时器
                clearInterval(this.timerID)
            }

            // 初始化渲染、状态更新之后
            render() {
                console.log('组件去更新render');
                return (
                    <div>
                        <h2 style={{ opacity: this.state.opacity }}>react学习</h2>
                        <button onClick={this.handleClick}>点击</button>
                        <button onClick={this.force}>强制更新</button>
                    </div>)
            }
        }
        ReactDOM.render(<VDOM />, document.getElementById('test')) //渲染
    </script>
</body>

</html>